{include file="../application/admin/view/header.html"}
<style type="text/css">
	#qtype {
		position: fixed;
		top: 7em;
		left: 0;
	}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
	<div class="col-md-12">
		<div class="alert kesn_prompt"></div>
	</div>
	 <div class="">
		<form class="form-horizontal">
			 <div class="form-group">
			 	<div id="questions_id" style="display: none;">{if condition="$action eq 'edit'"}{$questions_id}{/if}</div>
			    <label for="questions_name" class="col-sm-2 control-label">问卷标题</label>
			    <div class="col-sm-9">
			      <input type="text" class="form-control" id="questions_name" placeholder="" {if condition="$action eq 'edit'"} value="{$questions_name}" {/if}>
			    </div>
			 </div>
		</form>
	</div>
</div>

<div class="row">

	<div class="panel-group col-sm-2 col-md-2" role="tablist" id="qtype">
	    <div class="panel panel-default">
	      <div class="panel-heading" role="tab" id="collapseListGroupHeading1">
	        <h4 class="panel-title">
	        	常用题型
	          <a class="" role="button" data-toggle="collapse" href="#collapseListGroup1" aria-expanded="true" aria-controls="collapseListGroup1" data-status="open" id="el_memu">
	            <span class="icon-minus"></span>
	          </a>
	        </h4>
	      </div>
	      <div id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading1" aria-expanded="true">
	        <ul class="list-group" id="menu">
	          <li class="list-group-item" data-type="1">单选题</li>
	          <li class="list-group-item" data-type="2">多选题</li>
	          <li class="list-group-item" data-type="3">填空题</li>
	        </ul>
	      </div>
	    </div>
	  </div>

	  <div class="col-sm-2"></div>
	


	<div class="well col-sm-9 col-md-9" >
		<ul id="questions_index">
		{if condition="$action eq 'edit'"}
			{volist name="question_list" id="question" key="k"}
			<li class="list-group-item" data-type="{$question.type}">
				{switch name="$question.type"}
				{case value="1"}
				<div class="radio_question">
					<div class="input-group">
						<span class="input-group-addon input-sm">Q<span class="question_title">{$k}</span>:</span>
						<input type="text" class="form-control input-sm question_title_val" placeholder="题目" value="{$question.question}" />
					</div><br>
					<form class="form-horizontal answers">
					{volist name="question.answers" id="answer" key="i"}
						<div class="form-group _item">
							<label class="radio col-sm-6 col-sm-offset-1" for="radio{$k}_{$i}">
								<input type="radio"  value="" id="radio{$k}_{$i}" data-toggle="radio" class="custom-radio input-sm"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
								<input type="text" class="form-control input-sm radios_answer" placeholder="选项" value="{$answer}" />
							</label>
							<div class="col-sm-2"><a href="#" class="kesn_danger kesn_remove"><span class="fui-cross-circle"></span>移除</a></div>
						</div>
					{/volist}
					</form>
					<form class="form-inline">
						<div class="form-group">
							<div class="input-group col-sm-3">
								<div class="input-group-addon input-sm">分值</div>
								<input type="number" class="form-control input-sm score" placeholder="" value="{$question.score}">
							</div>&nbsp;
							<div class="input-group col-sm-3">
								<div class="input-group-addon input-sm">正确选项</div>
								<input type="number" class="form-control input-sm true_answer" placeholder="" value="{$question.true_answer}">
							</div>&nbsp;&nbsp;
							<a href="#"><span class="fui-plus-circle add_radio"></span>添加选项</a>&nbsp;&nbsp;
							<a href="#" class="kesn_danger remove_li"><span class="fui-trash"></span>删除题目</a>
						</div>
					</form>
				</div>
				{/case}
				{case value="2"}
					<div class="checkbox_question">
					<div class="input-group">
					<span class="input-group-addon input-sm">Q<span class="question_title">{$k}</span>:</span>
					<input type="text" class="form-control input-sm question_title_val" placeholder="题目" value="{$question.question}" />
					</div><br>
					<form class="form-horizontal answers">
					{volist name="$question.answers" id="answer" key="i"}
						<div class="form-group _item">
						<label class="checkbox col-sm-6 col-sm-offset-1" for="checkbox{$k}_{$i}">
							<input type="checkbox" value="" id="checkbox{$k}_{$i}" data-toggle="checkbox" class="custom-checkbox input-sm"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
							<input type="text" class="form-control input-sm checkbox_answer" placeholder="选项" value="{$answer}"/>
							</label>
						<div class="col-sm-2">
							<a href="#" class="kesn_danger"><span class="fui-cross-circle kesn_remove"></span>移除</a></div>
						</div>
					{/volist}
					</form>
					<form class="form-inline">
						<div class="form-group">
							<div class="input-group col-sm-3">
								<div class="input-group-addon input-sm">分值</div>
								<input type="number" class="form-control input-sm score" placeholder="" value="{$question.score}">
							</div>&nbsp;&nbsp;
							<div class="input-group col-sm-3">
								<div class="input-group-addon input-sm">正确选项</div>
								<input type="text" class="form-control input-sm true_answer" placeholder="" value="{$question.true_answer}">
							</div>&nbsp;
							<a href="#"><span class="fui-plus-circle add_checkbox"></span>添加选项</a><a href="#" class="kesn_danger remove_li"><span class="fui-trash"></span>删除题目</a>
						</div>
					</form>
					</div>
				{/case}
				{case value="3"}
					<div class="textarea_question">
						<div class="input-group">
							<span class="input-group-addon input-sm">Q<span class="question_title">{$k}</span>:</span>
							<input type="text" class="form-control input-sm question_title_val" placeholder="题目" value="{$question.question}" />
						</div><br>
					<form class="form-horizontal answers">
						<div class="form-group _item">
							<div class="input-group ">
								<div class="input-group-addon input-sm">正确答案</div>
								<textarea class="form-control col-sm-9 true_answer" placeholder="请输入关键字并用&分隔">{$question.true_answer}</textarea>
							</div>
						</div>
					</form>
					<form class="form-inline">
						<div class="form-group">
						<div class="input-group col-sm-4">
							<div class="input-group-addon input-sm">分值</div>
							<input type="number" class="form-control input-sm score" placeholder="" value="{$question.score}"></div>&nbsp;&nbsp;&nbsp;
						<a href="#" class="kesn_danger remove_li"><span class="fui-trash"></span>删除题目</a></div>
					</form>
					</div>
				{/case}
				{/switch}
				</li>
			{/volist}
			{$page}
		{/if}
		
		</ul>
		<button class="btn btn-info questions_save">保存</button>
	</div>

</div>


</div>

{include file="../application/admin/view/footer.html"}
<script type="text/javascript" src="/static/js/Sortable.min.js"></script>
<script type="text/javascript">
	//元素菜单状态
	$('#el_memu').click(function(){
		var _this = $(this);
		var _status = _this.attr('data-status');
		if (_status == 'open') {
			_this.children('span').removeClass('icon-minus');
			_this.children('span').addClass('icon-plus');
			_this.attr('data-status','close');
		}else{
			_this.children('span').removeClass('icon-plus');
			_this.children('span').addClass('icon-minus');
			_this.attr('data-status','open');
		}
	});
</script>
<script type="text/javascript">
	var question_i = 0;
	Sortable.create(document.getElementById('menu'),{
		group:{
			name:'words',
			pull:'clone',
			push:false,
		},
		sort:false,
		animation:150,
	});

	Sortable.create(document.getElementById('questions_index'),{
		group:{
			name:'words',
			pull:false,
			push:true,
		},
		animation:150,
		onAdd:function(evt){
			$('#questions_index').find('li').each(function(index){
				$(this).find('.question_title').html('Q'+index+':');
			});
			var _this = $(evt.item);
			var type = _this.attr('data-type');
			if (type == '1') {
				var _html = '<div class="radio_question"><div class="input-group"><span class="input-group-addon input-sm">Q<span class="question_title">'+evt.newIndex+'</span>:</span><input type="text" class="form-control input-sm question_title_val" placeholder="题目" value="" /></div><br><form class="form-horizontal answers"></form><form class="form-inline"><div class="form-group"><div class="input-group col-sm-3"><div class="input-group-addon input-sm">分值</div><input type="number" class="form-control input-sm score" placeholder=""></div>&nbsp;<div class="input-group col-sm-3"><div class="input-group-addon input-sm">正确选项</div><input type="number" class="form-control input-sm true_answer" placeholder=""></div>&nbsp;&nbsp;<a href="#"><span class="fui-plus-circle add_radio"></span>添加选项</a>&nbsp;&nbsp;<a href="#" class="kesn_danger remove_li"><span class="fui-trash"></span>删除题目</a></div></form></div>';
				_this.html(_html);
			}else if(type == '2'){
				var _html = '<div class="checkbox_question"><div class="input-group"><span class="input-group-addon input-sm">Q<span class="question_title">'+evt.newIndex+'</span>:</span><input type="text" class="form-control input-sm question_title_val" placeholder="题目" value="" /></div><br><form class="form-horizontal answers"></form><form class="form-inline"><div class="form-group"><div class="input-group col-sm-3"><div class="input-group-addon input-sm">分值</div><input type="number" class="form-control input-sm score" placeholder=""></div>&nbsp;&nbsp;<div class="input-group col-sm-3"><div class="input-group-addon input-sm">正确选项</div><input type="text" class="form-control input-sm true_answer" placeholder=""></div>&nbsp;<a href="#"><span class="fui-plus-circle add_checkbox"></span>添加选项</a><a href="#" class="kesn_danger remove_li"><span class="fui-trash"></span>删除题目</a></div></form></div>';
				_this.html(_html);
			}else if(type == '3'){
				var _html = '<div class="textarea_question"><div class="input-group"><span class="input-group-addon input-sm">Q<span class="question_title">'+evt.newIndex+'</span>:</span><input type="text" class="form-control input-sm question_title_val" placeholder="题目" value="" /></div><br><form class="form-horizontal answers"><div class="form-group _item"><div class="input-group"><div class="input-group-addon input-sm">正确答案</div><textarea class="form-control col-sm-9" placeholder="请输入关键字并用&分隔"></textarea></div></div></div></form><form class="form-inline"><div class="form-group"><div class="input-group col-sm-4"><div class="input-group-addon input-sm">分值</div><input type="number" class="form-control input-sm score" placeholder=""></div>&nbsp;&nbsp;&nbsp;<a href="#" class="kesn_danger remove_li"><span class="fui-trash"></span>删除题目</a></div></form></div>';
				_this.html(_html);
			}
			
		},
		onUpdate:function(evt){
			$('#questions_index').find('li').each(function(index){
				$(this).find('.question_title').html(index);
			});
		},
		onRemove:function(evt){
			$('#questions_index').find('li').each(function(index){
				$(this).find('.question_title').html(index);
			});
		}
	});

	
	var question_radios = new Array();
	var radio_i = 0;

	//处理单选题添加选项
	$('ul#questions_index').on('click','.add_radio',function(){
		var _this = $(this);
		question_i++;
		var _html = '<div class="form-group _item"><label class="radio col-sm-6 col-sm-offset-1" for="radio'+question_i+'"><input type="radio"  value="" id="radio'+question_i+'" data-toggle="radio" class="custom-radio input-sm"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span><input type="text" class="form-control input-sm radios_answer" placeholder="选项" /></label><div class="col-sm-2"><a href="#" class="kesn_danger kesn_remove"><span class="fui-cross-circle"></span>移除</a></div></div>';
		_this.parents('.radio_question').find('.answers').append(_html);
	});

	//复选框添加选项
	$('ul#questions_index').on('click','.add_checkbox',function(){
		var _this = $(this);
		question_i++;
		var _html = '<div class="form-group _item"><label class="checkbox col-sm-6 col-sm-offset-1" for="checkbox'+question_i+'"><input type="checkbox" value="" id="checkbox'+question_i+'" data-toggle="checkbox" class="custom-checkbox input-sm"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span><input type="text" class="form-control input-sm checkbox_answer" placeholder="选项" /></label><div class="col-sm-2"><a href="#" class="kesn_danger"><span class="fui-cross-circle kesn_remove"></span>移除</a></div></div>';
		_this.parents('.checkbox_question').find('.answers').append(_html);
	});

	//移除
	$('ul#questions_index').on('click','.kesn_remove',function(){
		var _this = $(this);
		_this.parents('._item').remove();
	});
	//移除li
	$('ul#questions_index').on('click','.remove_li',function(){
		var _this = $(this);
		_this.parents('li.list-group-item').remove();
	});
</script>
<script type="text/javascript">
	$('.questions_save').click(function(){
		var save_btn = $(this);
		var question_id = 0;
		var questions_score = 0;
		var sub_function = false;
		var questions_id = $('#questions_id').html();
		questions_id = $.trim(questions_id);
		if (questions_id == '' || questions_id == 'undefinded') {
			questions_id = 0;
		}
		var questions_name = $('#questions_name').val();
		questions_name = $.trim(questions_name);
		if (questions_name == '') {
			alert('问卷标题名不能为空！');
			return;
		}
		var questions = new Array;
		$('#questions_index').find('li.list-group-item').each(function(){
			var _this = $(this);
			var question_obj = {};
			question_id++;
			question_obj['question_id'] = question_id;
			question_obj['question'] = $.trim(_this.find('.question_title_val').val());
			if (question_obj['question'] == '') {
				alert('题目不能为空');
				return;
			}
			question_obj['type'] = _this.attr('data-type');
			if (question_obj['type'] == '1') {
				var answers = new Array;
				_this.find('._item').each(function(){
					var answer = $(this).find('.radios_answer').val();
					answer = $.trim(answer);
					if (answer == '') {
						alert('答案选项不能为空');
						return;
					}
					answers.push(answer);
				});

			}else if(question_obj['type'] == '2'){
				var answers = new Array;
				_this.find('._item').each(function(){
					var answer = $(this).find('.checkbox_answer').val();
					answer = $.trim(answer);
					if (answer == '') {
						alert('答案选项不能为空');
						return;
					}
					answers.push(answer);
				});
			}

			question_obj['answers'] = answers;
			question_obj['true_answer'] = $.trim(_this.find('.true_answer').val());
			question_obj['score'] = $.trim(_this.find('.score').val());
			if (question_obj['score'] == '' || question_obj['score'] < 0) {
				alert('分值项有误！');
				return;
			}
			questions_score += parseInt(question_obj['score']);
			questions.push(question_obj);
			sub_function = true;
		});
		if (sub_function == false) {
			return;
		}
		if (questions_score >100) {
			alert('总分值已超过100，请修改！');
			return;
		}
		questions = JSON.stringify(questions);

		$.ajax({
		       url: "save",    //请求的url地址
		      dataType: "json",   //返回格式为json
		      async: true, //请求是否异步，默认为异步，这也是ajax重要特性
		      data: { "questions_id": questions_id,"questions_name" : questions_name,"questions":questions},    //参数值
		      type: "POST",   //请求方式
		      success: function(data) {
		        if (data.err == '0') {
		        	kesn_prompt('success',data.content);
		        	{if condition="$action eq 'add'"}
		        	save_btn.attr('disabled','disabled');
		        	{/if}
		        }else{
		        	kesn_prompt('fail',data.content);
		        }
		    }
		});

	});
</script>
</footer>
</body>
</html>